<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() +
            ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录界面</title>
    <link rel="stylesheet"
          href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script
            src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script
            src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

    </head>
</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">用户登录</h3>
    </div>
    <div class="panel-body">
        <div class="alert alert-danger alert-dismissable hide">手机号或密码错误!</div>
    </div>

    <div class="container">
        <div class="row">
            <form:form class="form-horizontal" id="form" action="/user/login" modelAttribute="user" method="post">
                <!--在Bootstrap框架中要实现水平表单效果 -->
                <div class="form-group">
                    <%--@declare id="username"--%><label for="username" class="col-sm-3 control-label">手机号:</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" id=user_tel name="userTel"
                               placeholder="请输入手机号">
                    </div>
                    <div class="form-control" style="border: none;box-shadow: none;color: red"></div>
                    <!--放置错误信息  -->
                </div>
                <div class="form-group">
                    <%--@declare id="password"--%><label for="password" class="col-sm-3 control-label">密码:</label>
                    <div class="col-sm-5">
                        <input type="password" class="form-control" id="user_pwd" name="userPwd"
                               placeholder="请输入密码">
                    </div>
                    <div class="form-control" style="border: none;box-shadow: none;color: red"></div>
                    <!--放置错误信息  -->
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-10">
                        <button type="submit" style="width:180px;" class="btn btn-default " id="LoginButton">登录</button>
                        <b>还没有账号？<a href="/user/toRegister">点击立即注册</a></b>
                    </div>
                </div>
            </form:form>
            ${msg }
        </div>
    </div>
</div>
<script>
    //手机号码验证
    jQuery.validator.addMethod(
        "isMobile",
        function (value, element) {
            var length = value.length;
            var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
            return this.optional(element) || (length == 11 && mobile
                .test(value));
        }, "请正确填写您的手机号码");
    $(document).ready(function () {
        $("#form").validate({                    //element:被校验的元素对象
            onfocusout: function (element) {
                $(element).valid();
            }, //失去焦点验证
            rules: {
                "user_tel": {
                    "required": true,
                    "maxlength": 11,
                    "isMobile": true,
                },
                "user_pwd": {
                    "required": true,
                    "rangelength": [6, 12]
                },
            },
            messages: {
                "user_tel": {
                    "required": "请输入手机号码！",
                    "maxlength": "手机号码不能超过11位！",
                    "isMobile": "请正确填写您的手机号码!",
                },
                "user_pwd": {
                    "required": "密码不能为空!",
                    "rangelength": "密码长度6-12位!"
                }
            },
            //单条校验失败，后会调用此方法，在此方法中，编写错误消息如何显示 及  校验失败回调方法
            showErrors: function (errorMap, errorList) {
                // 遍历错误列表
                for (var obj in errorMap) {
                    // 自定义错误提示效果
                    $('#' + obj).parent().addClass('has-error');
                }
                // 此处注意，一定要调用默认方法，这样保证提示消息的默认效果
                this.defaultShowErrors();
            },
            // 验证成功后调用的方法
            success: function (label) {
                $(label).parent().prev().removeClass('has-error'); //去除效果
            },
            //自定义错误信息位置
            errorPlacement: function (error, element) {
                error.appendTo(element.parent().next());
            },
            //表单全部校验通过之后进行的动作
            submitHandler: function (form) {
                document.getElementById("form").submit();
            }
        });

        /* 鼠标特效 */
        var a_idx = 0;
        $("body").click(function (e) {
            var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤", "❤敬业❤", "❤诚信❤", "❤友善❤");
            var $i = $("<span></span>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
            });
            $("body").append($i);
            $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                1500,
                function () {
                    $i.remove();
                });
        });
    });
</script>
</body>
</html>